<script setup lang="ts">
import { ref } from 'vue'
import lighton from './assets/light-on.svg'
import lightoff from './assets/light-off.svg'

const isOn = ref(false)

const changeImage = () => {
  isOn.value = !isOn.value
}

</script>


<template>
  <button @click="changeImage()" :style="{ backgroundColor: isOn ? 'green' : '' }">点击切换</button>
  <!-- 三元表达式写法绑定类型 -->
  <p :class="isOn ? 'isActive' : ''">{{ isOn }}</p>
  <!-- 对象的写法绑定类名：{类名：条件}，如果条件为真就添加类型 -->
   <p :class="{ isActive: isOn }">{{ isOn }}</p>
   
  <img :src="isOn ? lighton : lightoff" alt="">
</template>

<style>
.isActive{
  color: burlywood;
}
</style>